<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>angular</title>
</head>
<body>
<style type="text/css" media="screen">
	*{margin: 0;padding: 0;}
	body{
		font-size: 10px;
	}
	li{list-style: none;width: 25%;float: left;text-align: center;}
	.header{
		width: 100%;
		background-color: green;
		text-align: center;
		padding: 0.5rem 0;
		font-size: 0.6rem;
		color: #fff;
	}
	.container{
		width: 100%;
		overflow: hidden;
		margin-top: 0.2rem;
	}
	.content{
		width: 68%;
		background: blue;
		float: left;
		height: 10rem;
	}
	.silder{
		width: 30%;
		background: yellow;
		float: right;
		height: 10rem;
	}
	footer{
		font-size: 0.6rem;
	}
</style>
<div ng-app="myApp">
	<div class="header" ui-view></div>
</div>

<script type="text/javascript">
	document.getElementsByTagName('html')[0].style.fontSize=window.screen.width/10+'px';
</script>
<script src="angular.min.js"></script>
<script src="angular-ui-router.js"></script>
<script type="text/javascript">
	var app =angular.module('myApp', ['ui.router']);
	var header={
		template:'<h1>header</h1>'
	}
	app.config(function($stateProvider) {
		$stateProvider
			.state('home',{
				url:'/home',
				template:'<h1>hello<div ui-view></div></h1>'
			})
			.state('home.color',{
				url:'/color/:c',
				template:'<h2>color</h2>'
			})
			.state('home.movie',{
				url:'/movie/:m',
				template:'<h2>movie</h2>'
			})
	})
	.run(function($rootScope){
		//定义时间通过$on
		$rootScope.$on('$stateChangeStart',function(){
			
		})
	})
</script>
</body>
</html>
<!--应该是14.11，时间-2017-05-08->